<template>
  <a-tabs class="tabs">
    <a-tab-pane class="pane" key="1" tab="加载">
      <FileUpload></FileUpload>
    </a-tab-pane>

    <a-tab-pane class="pane" v-if="isDev" key="test" tab="test"> </a-tab-pane>

    <a-tab-pane
      class="pane"
      key="CodeBuilder"
      tab="代码生成"
      :disabled="!isDataLoaded"
    >
      <CodeBuilder></CodeBuilder>
    </a-tab-pane>

    <a-tab-pane class="pane" key="2" tab="筛选" :disabled="!isDataLoaded">
      <Query></Query>
    </a-tab-pane>

    <a-tab-pane class="pane" key="3" tab="分组" :disabled="!isDataLoaded">
      <Groupby></Groupby>
    </a-tab-pane>

    <a-tab-pane class="pane" key="4" tab="透视表" :disabled="!isDataLoaded"
      >期待！！！！</a-tab-pane
    >
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, isReactive, isRef, ref, toRef } from "vue";
import FileUpload from "./FileUpload/index.vue";
import Query from "./Query/index.vue";
import Groupby from "./Groupby/index.vue";
import CodeBuilder from "./CodeBuilder/index.vue";
import DfStore from "@/store/DfStore";

export default defineComponent({
  name: "FunctionTabs",
  props: {
    // isDataLoaded: { type: Boolean, required: true },
  },
  components: {
    FileUpload,
    Query,
    Groupby,
    CodeBuilder,
  },

  setup() {
    let isDataLoaded = DfStore.getStateToRefs().isLoaded;
    let isDev = process.env.NODE_ENV == "development";

    let data = DfStore.getData();
    let columns = DfStore.getColumns();

    let onFilter = ({ filterList }: any) => {
      console.log("onFilter", filterList);
    };

    return {
      isDataLoaded,
      isDev,
      onFilter,
      columns,
      data,
    };
  },
});
</script>


<style lang="less" scoped>
div.pane {
  max-height: 35vh;
  overflow: auto;
}
</style>





